<template>
	<view v-if="info">
		<form-item label="交易地址">
			<input disabled :value="info.address" />
		</form-item>

		<form-item label="交易描述">
			<input disabled :value="info.message" />
		</form-item>

		<form-item label="交易类型">
			<image class="trade-type" :src="`../../static/icon_${info.type}.png`"></image>
		</form-item>

		<form-item label="联系方式">
			<input disabled :value="info.contact" />
		</form-item>
	</view>

	<!-- 骨架屏组件 -->
	<skeleton v-else />
</template>

<script lang="ts" setup>
	import skeleton from './skeleton.vue'

	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import { getTradeInfo, type Trade } from '../../api';

	// 交易详情
	const info = ref<Trade>(null)

	onLoad((query) => {
		// uni.showLoading({ title: '加载中...' })

		setTimeout(() => {
			// 调用接口获取数据
			getTradeInfo(query.id).then(result => {
				info.value = result
				// uni.hideLoading()
			})
		}, 2000)

	})
</script>

<style lang="scss">
	.trade-type {
		float: right;
		display: block;
		width: 60rpx;
		height: 60rpx;
	}

	@keyframes van-skeleton-blink {
		50% {
			opacity: .6
		}
	}


	.skeleton {
		animation: van-skeleton-blink 1.2s ease-in-out infinite;
	}

	.skeleton-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 100rpx;
		border-bottom: 1px solid #000;

		&__label {
			width: 200rpx;
			height: 60rpx;
			background-color: #ccc;
		}

		&__control {
			width: 400rpx;
			height: 60rpx;
			background-color: #ccc;
		}
	}
</style>